<template>
  <div>
    <div>
      <level-table-search-header
        :shop-id="shopId"
        @search="handleSearch"
        @reset="fetchData(true)"
      />
    </div>

    <div class="oprButtons item">
      <el-button type="danger" size="small" plain icon="el-icon-delete" round @click="handleSelectDel">删除</el-button>
    </div>

    <table-panel
      ref="OrderMessageTableRef"
      :table-data="tableData"
      :table-head="column"
      :checkbox="true"
      :border="true"
      @selection-change="handleSelectChange"
    >
      <template #status="{ scope }">
        <el-switch
          v-model="scope.status"
          :active-value="LIST_STATE.ON"
          :inactive-value="LIST_STATE.OFF"
          @change="handleChangeAppointmentCategory(scope)"
        />
      </template>

      <template #opr="{ scope }">
        <el-button type="text" @click="handleEditResource(scope)">编辑</el-button>
        <el-button type="text" @click="handleDelResource(scope)">删除</el-button>
      </template>
    </table-panel>
    <div class="footer">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        :current-page="params.pageNum"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import tablePanel from '../../../components/TablePanel'
import levelTableSearchHeader from '@/views/wxaReservationModule/views/resourceManage/components/levelTableSearchHeader'
import {
  levelColumn,
  LIST_STATE
} from '@/views/wxaReservationModule/views/resourceManage/config'
import {
  delAppointmentLevelDetail,
  getAppointmentLevelQryLis,
  updateAppointmentLevelStatus
} from '@/api/reservation'

export default {
  name: 'LevelTable',
  components: { tablePanel, levelTableSearchHeader },
  props: {
    shopId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      LIST_STATE,
      column: levelColumn,
      tableData: [],
      tempSelectList: [],
      params: {
        name: '',
        pageNum: 1,
        pageSize: 10,
        shopId: '',
        status: ''
      },
      total: 0
    }
  },
  watch: {
    shopId() {
      console.log('变化11', this.shopId)
      this.fetchData(true)
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    handleSelectChange(val) {
      this.tempSelectList = val
    },
    handleSearch(val) {
      this.params = {
        ...this.params,
        ...val,
        pageNum: 1,
        pageSize: 10
      }
      this.fetchData()
    },
    handlePageChange(e) {
      this.params.pageNum = e
      this.fetchData()
    },
    async fetchData(isClear = false) {
      if (isClear) {
        this.params = {
          levelId: '',
          name: '',
          pageNum: 1,
          pageSize: 10,
          shopId: '',
          status: ''
        }
      }
      this.params.shopId = this.shopId
      const { code, data } = await getAppointmentLevelQryLis(this.params)
      if (code === 0) {
        const { total, list } = data
        this.total = total
        this.tableData = list
      }
      console.log('请求')
    },

    async handleDelResource({ id }) {
      const { code } = await delAppointmentLevelDetail({ id })
      if (code === 0) {
        this.$message.success('删除成功!')
        await this.fetchData(true)
      }
    },
    async handleChangeAppointmentCategory({ id, status }) {
      const { code } = await updateAppointmentLevelStatus({ id, status })
      if (code === 0) {
        this.$message.success('成功!')
        await this.fetchData()
      }
    },
    handleSelectDel() {
      let len = this.tempSelectList.length
      if (len === 0) {
        this.$message.warning('请选择后再删除!')
        return
      }
      this.tempSelectList.map((v) => {
        delAppointmentLevelDetail({ id: v.id }).then((res) => {
          const { code } = res
          if (code === 0) len--
          if (len === 0) {
            this.$message.success('批量删除成功!')
            this.fetchData(true)
            this.tempSelectList = []
          }
        })
      })
    },
    handleEditResource(scope) {
      this.$emit('edit', { detail: scope })
    }
  }
}
</script>

<style scoped lang="scss">
.item {
  margin: 10px 0;
}
</style>
